<template>
    <el-aside width="200px">
        <el-menu
                :unique-opened="true"
                router
                :default-active="$route.path"
                class="el-menu-vertical-demo"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
            <!--logo-->
            <h5 class="main-logo">
                <img src="@/assets/kgc.png">
                <span class="logo-info">KGC智慧教育</span>
            </h5>

            <el-menu-item :key="idx" index="/home" v-for="(item,idx) in menu" v-if="!item.children">
                <i :class="item.icon"></i>
                <span slot="title">{{item.title}}</span>
            </el-menu-item>

            <el-submenu :index="idx+''"  v-else>
                <template slot="title">
                    <i :class="item.icon"></i>
                    <span>{{item.title}}</span>
                </template>
                <el-menu-item :key="sidx" :index="sitem.path" v-for="(sitem,sidx) in item.children">{{sitem.title}}</el-menu-item>
            </el-submenu>

        </el-menu>
    </el-aside>
</template>

<script>
    export default {
        name: "NavBar",
        data(){
            return{
                menu:this.$store.state.menuData
            }
        }
    }
</script>

<style scoped>
    .el-aside {
        color: #333;
        box-shadow: 5px 0 5px #ccc;
    }

    .el-aside::-webkit-scrollbar {
        display: none;
    }

    .el-submenu .el-menu-item {
        min-width: 0;
    }

    .el-menu {
        height: 100vh;
    }

    .main-logo img {
        width: 70px;
        vertical-align: middle;
    }

    .main-logo {
        color: white;
        text-align: center;
        margin-bottom: 10px;
        margin-top: 15px;
    }
</style>
